<template>
    <view style="position: relative">
        <view :class="icon" :style="{ color: color, fontSize: size }"></view>
        <view v-if="type == 'drop' && number > 0" class="dian"></view>
        <view v-if="type == 'number' && number > 0" class="number text-xs text-white">{{ number > 99 ? "99+" : number }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface iconType {
    type?: "drop" | "number"; // 显示红点或者数字
    icon: string; // 图标
    color?: string; // 图标颜色
    size?: string; // 图标大小
    number?: number; // 判断是否显示红点的字段
    top?: string; // 偏移量小红点
    right?: string; // 偏移量
}

const props = withDefaults(defineProps<iconType>(), {
    type: "number",
    icon: "",
    color: "#43BD42",
    size: "50rpx",
    number: 0,
    top: "-10rpx",
    right: "-5rpx"
});
</script>

<style scoped lang="scss">
.dian {
    width: 10rpx;
    height: 10rpx;
    background-color: #ff0000;
    border-radius: 10rpx;
    position: absolute;
    right: -2rpx;
    top: -5rpx;
}

.number {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    background-color: #ff0000;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -10rpx;
    right: -5rpx;
}
</style>
